<template>
  <div id="detail">
    <!--top-header-->
    <top-header></top-header>
    <!--logo and search-->
    <div style="clear: left" class="logoAndSearch">
      <logo-search @on-submit="onsubmit"></logo-search>
    </div>
    <!--nav-->
    <h-nav :activeIndex="activeIndex"></h-nav>

    <!--内容区-->

    <div v-show="true" class="containerBox">
      <div class="container maxWidth clearfix">
        <div class="containerLeft fl">
          <div class="bread_crumbs">
            <a href="/kuaibao/" _hover-ignore="1">推广活动</a>
            <span class="arrow">›</span>
            <a href="/0-0-165-0-0/" _hover-ignore="1">促销活动</a>
            <span class="arrow">/</span>
            <a href="/0-0-0-0-208/">{{messageData.platformType}}</a>
            <span class="arrow">›</span>
            <span class="detail_tit_s " _hover-ignore="1">{{messageData.title}}  {{messageData.subtitle}}</span>
          </div>
          <h4 class="detial_tit">
            优惠券# {{messageData.title}} <span class="red">{{messageData.subtitle}}</span>
          </h4>
          <div class="detail_info">
            <div class="detail_pic" _hover-ignore="1">
              <a target="_blank" class="pic_wrap">
                <img v-src="messageData.recommendPagePic"
                     alt=""></a>
              <div class="detail_active ">
                <a v-show="messageData.platformType=='淘宝'" class="list_buy_btn combtn_b combtn_red "
                   target="_blank" isconvert="1"
                   href="https://s.click.taobao.com/ltJQ1Xw"><i class="home_icon"></i>
                  前往购买</a>
                <a v-show="messageData.platformType=='天猫'" class="list_buy_btn combtn_b combtn_red "
                   target="_blank" isconvert="1"
                   href="https://s.click.taobao.com/xpFUoUw"><i class="home_icon"></i>
                  前往购买</a>
              </div>
              <a target="_blank" class="shop_name" href="/0-1-0-0-0/">商城：{{messageData.platformType}}</a>
            </div>
            <div class="detail_dec">
              <span class="tuijian_area"><i class="ico_rec"></i>推荐理由</span>
              <p>
                {{messageData.recommendedReason}}
              </p>

            </div>
            <!-- 喵友们说 -->
          </div>

          <h1 class="toptitle">好价单品推荐</h1>
          <div class="listBox">
            <div @click="toGoBuy(item.goodId)" v-for="(item,index) in listData"
                 class="tuijian_item flex-row">
              <div class="img_box flex-grow-0">
                <img v-lazy="item.mainPic" alt="">
              </div>
              <div class="text_box flex-grow-1">
                <p class="name twoLine">{{item.name}}</p>
                <p class="name_desc">
                  已领取{{item.couponUse}}张
                </p>
                <div class="priceBox flex-row">
                  <div class="flex-grow-1">抢{{item.couponValue | getCount}}元券</div>
                  <div class="price flex-grow-1">{{item.priceAfterCoupon | getCount}}券后价</div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="containerRight fr"></div>
      </div>
    </div>
    <!--footer-->
    <v-footer></v-footer>

    <!--回到顶部-->
    <go-top :isShowGoTop="isShowGoTop"></go-top>
  </div>
</template>
<script>
  import TopHeader from 'src/components/common/topHeader.vue'
  import HNav from 'src/components/common/nav.vue'
  import LogoSearch from 'src/components/common/logoSearch.vue'
  import VFooter from 'src/components/common/footer.vue'
  import GoTop from 'src/components/common/goTop.vue'
  import MDUtils from 'src/assets/js/md-utils';
  import {RUI_GETYOUHUIDETAILS,GETCHANGELINK} from 'src/const/uri'

  export default {
    components: {
      TopHeader, HNav, LogoSearch, VFooter, GoTop
    },
    data() {
      return {
        activeIndex: 12,
        isShowGoTop: false,
        messageData: [],
        listData: [],
      }
    },
    created() {
      this.initData();
    },
    methods: {
      initData() {
        this.$ajax.get(RUI_GETYOUHUIDETAILS, {
          recommendId: MDUtils.getQueryParam('id'),
          promotionTypeId: 1,
        }, (res) => {
          console.log(res);
          this.messageData = res.data.otherData.recommend;
          this.listData = res.data.data;
        });
      },
      onsubmit(val) {
        window.location.href = `${cdnBase}/html/souhuiquan.html?key=${val}`
      },
      toDetails() {
      },
      toGoBuy(id){
       // console.log(id);
        this.$ajax.get(GETCHANGELINK,{
          goodId:id,
          promotionTypeId:1
        },(res)=>{
          window.open(res.data.tbkCouponLink);
        });
      }
    }

  }
</script>
<style lang="less">
  @import "detail";
  .red{
    color:@themeColor;
  }
</style>
